<article class="cl pd-20">
    <form action="" method="post" class="form form-horizontal" id="form-save">
        <input type="hidden" name="userid" id="userid" value="{$data.userid}">
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">
                <span class="c-red">*</span>用户名：</label>
            <div class="formControls col-xs-8 col-sm-6">
                <input type="text" class="input-text" id="username" name="username" value="{$data.username}"
                    autocomplete="new-password">
            </div>
        </div>
        {empty name="$data.userid"}
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">
                <span class="c-red">*</span>初始密码：</label>
            <div class="formControls col-xs-4 col-sm-6">
                <input type="password" class="input-text" id="password" name="password" value=""
                    placeholder="初始密码, 6位及以上, 至少包括字母和数字" autocomplete="new-password">
            </div>
            <div class=" form-label col-xs-4 col-sm-4" style="text-align: left;">
                <span class="c-red" id="span_password">* 为空时使用系统配置的默认密码</span>
            </div>
        </div>
        {else/}
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">
                修改密码：</label>
            <div class="formControls col-xs-8 col-sm-6">
                <input type="password" class="input-text" id="password" name="password" value=""
                    placeholder="6位及以上, 至少包括字母和数字" autocomplete="new-password">
            </div>
        </div>
        {/empty}
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">
                确认密码：</label>
            <div class="formControls col-xs-8 col-sm-6">
                <input type="password" class="input-text" id="repassword" name="repassword" value=""
                    placeholder="确认密码, 两次密码需一致">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">
                昵称: </label>
            <div class="formControls col-xs-8 col-sm-6">
                <input type="text" class="input-text" id="nickname" name="nickname" value="{$data.nickname}"
                    placeholder="昵称">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">
                姓名: </label>
            <div class="formControls col-xs-8 col-sm-6">
                <input type="text" class="input-text" id="truename" name="truename" value="{$data.truename}"
                    placeholder="姓名">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">邮箱：</label>
            <div class="formControls col-xs-4 col-sm-6">
                <input type="text" class="input-text" id="email" name="email" value="{$data.email}"
                    autocomplete='email'>
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">
                <span class="c-red">*</span>角色：</label>
            <div class="formControls col-xs-4 col-sm-4">
                <span class="select-box" style="width:150px;">
                    <select class="select" id="roleid" name="roleid" title="role">
                        {foreach $dataRole as $k=>$op}
                        <option value="{$k}" {eq name="data.roleid" value="$k" }selected{/eq}>{$op}</option>
                        {/foreach}
                    </select>
                </span>
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-2 col-sm-2">
                头像：</label>
            <div class="formControls col-xs-8 col-sm-6">
                <input type="text" class="input-text" value="{$data.avatar}" name="avatar" id="avatar">
                <div style="width: 160px;height: 160px;">
                    <a href="javascript:void(0);" onclick="uploadPicture()">
                        <img id="view-img" src="{$data.avatar ? $data.avatar : '/static/images/upload_picture.png'}"
                            alt="头像" title="{$data.avatar ? '更换' : '添加'}头像"
                            style="max-width: 160px;max-height: 160px;">
                    </a>
                </div>
            </div>
            <label class="form-label col-xs-2 col-sm-2">
                <a class="btn btn-success radius" href="javascript:uploadPicture();">{$data.avatar ? '更换' :
                    '添加'}头像</a></label>
            <div class="col-3"> </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">
                <span class="c-red"></span>状态：</label>
            <div class="formControls col-xs-8 col-sm-6">
                <div class="radio-box">
                    <input type="radio" name="status" id="status-1" value="1" {$data.status==null || $data.status==1
                        ? 'checked' : "" }>
                    <label for="typeId-1">启用</label>
                </div>
                <div class="radio-box">
                    <input type="radio" name="status" id="status-2" value="2" {$data.status==2 ? 'checked' : "" }>
                    <label for="status-2">禁用</label>
                </div>
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">备注：</label>
            <div class="formControls col-xs-8 col-sm-6">
                <textarea id="remark" name="remark" cols="" rows="" class="textarea" placeholder="备注...200个字符以内"
                    dragonfly="true" onKeyUp="textarealength(this,200)">{$data.remark}</textarea>
                <p class="textarea-numberbar">
                    <em class="textarea-length">0</em>/200
                </p>
            </div>
        </div>
        <div class="row cl">
            <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                <input class="btn btn-success radius" type="button" id="form-save-button"
                    value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
                <input class="btn btn-default radius" type="button" value="&nbsp;&nbsp;取消&nbsp;&nbsp;"
                    onClick="layer_close();">
            </div>
        </div>
    </form>
    <!-- 图像上传 -->
    <div>
        <input type="file" hidden name="image" id="upload_picture">
    </div>
</article>

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript">
    // 图片上传
    const file = document.querySelector('input[type="file"]');

    function uploadPicture() {
        // file模拟input点击事件
        var evt = new MouseEvent("click", {
            bubbles: false,
            cancelable: true,
            view: window,
        });
        file.dispatchEvent(evt, uploadfn());
    }

    function uploadfn() {
        file.oninput = function () {
            if (file.files && file.files[0]) {
                var formData = new FormData();
                formData.append("upload_file", file.files[0]);
                $.ajax({
                    url: '{:url("file_manager/uploadImage")}',
                    type: "post",
                    data: formData,
                    processData: false, // 告诉jQuery不要去处理发送的数据
                    contentType: false, // 告诉jQuery不要去设置Content-Type请求头
                    dataType: 'json',
                    success: function (res) {
                        // console.log(res);
                        var img = res.data.filename;
                        $("#view-img").attr('src', img);
                        $("#avatar").val(img);
                        layer.msg(res.msg, {
                            icon: 1,
                            time: 1000
                        });
                    },
                    error: function (res) {
                        layer.msg(res.msg, {
                            icon: 5,
                            time: 1000
                        });
                        return false;
                    }
                });
            }
        }
    }

    $(function () {
        // 密码正则验证复杂度
        function checkPassword(password) {
            var res = pwdFormat6Mix(password);
            if (!res) {
                layer.msg('* 密码6位及以上, 至少包括字母和数字', {
                    icon: 5,
                    time: 1000
                });
                return false;
            } else {
                return true;
            }
        }

        // 确认密码
        function confirmPassword(password, repassword) {
            if (password != repassword) {
                layer.msg('两次密码不一致', {
                    icon: 5,
                    time: 1000
                });
                return false;
            } else {
                return true;
            }
        }

        $("#password").blur(function () {
            if (!isNull($("#password").val())) {
                return checkPassword($("#password").val());
            }
        })

        $("#repassword").blur(function () {
            return confirmPassword($("#password").val(), $("#repassword").val());
        })

        $("#form-save-button").click(function () {
            if (!$("#username").val() || !$("#roleid").val) {
                layer.msg('用户名 or 角色 不能为空!', {
                    icon: 5,
                    time: 1000
                });
                return false;
            }

            var password = $("#password").val();
            var repassword = $("#repassword").val();
            if (!isNull(password) && !checkPassword(password)) {
                return false;
            }
            if (!confirmPassword(password, repassword)) {
                return false;
            }

            var email = $("#email").val();
            if (!isNull(email) && testEmail(email) == false) {
                layer.msg('邮箱格式不正确', {
                    icon: 5,
                    time: 1000
                });
                return false;
            }

            if (getblen($("#remark").val()) > 200) {
                layer.msg('备注过长', {
                    icon: 5,
                    time: 1000
                });
                return false;
            }

            var data = $("#form-save").serializeArray();
            $.ajax({
                type: 'POST',
                url: '{:url("/sys/sys_user/save")}',
                data: data,
                dataType: 'json',
                success: function (res) {
                    // console.log(res);
                    if (res.code == 0) {
                        layer.msg(res.msg, { icon: 1 }, function () {
                            parent.location.reload(); // 父页面刷新
                            var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                            parent.layer.close(index);
                        });
                    } else {
                        layer.msg(res.msg, {
                            icon: 5,
                            time: 1000
                        });
                        return false;
                    }
                }
            })
        })
    })
</script>
<!--请在上方写此页面业务相关的脚本-->